<style>
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 文章</el-breadcrumb-item>
                <el-breadcrumb-item>文章发表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="文章题目">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="文章内容">
                    <markdown-editor v-model="form.details" :configs="configs" ref="markdownEditor"></markdown-editor>
                </el-form-item>

                <el-form-item label="标签分类">
                    <el-tag
                        v-for="tag in form.tags"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                        {{tag.tagText}}
                    </el-tag>
                    <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                    >
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增</el-button>

                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
    import { markdownEditor } from 'vue-simplemde';

    export default {
        data: function() {
            return {
                inputVisible: false,
                inputValue: '',
                form: {
                    id: -1,
                    title: '',
                    details: '',
                    tags: [
                        {tagText: 'java'},
                        {tagText: 'spring'},
                    ],
                },
                configs: {
                    status: true,
                    initialValue: '',
                    renderingConfig: {
                        codeSyntaxHighlighting: true,
                        highlightingTheme: 'atom-one-light'
                    }
                }
            }
        },
        components: {
            markdownEditor
        },
        created() {
            this.$nextTick(_=>{
                let self = this;
                let id = self.$route.query.id;
                if(id) {
                    self.initBean(id);
                }
            })
        },
        methods: {
            initBean(id){
                let self = this;
                // 修改，需要得到数据
                self.$axios.get('/api/cloud-blog-web/blog/' + id).then(res => {
                    let data = res.data;
                    self.form.id = data.simple.id;
                    self.form.title = data.simple.title;
                    self.form.details = data.details.details;
                    self.form.tags = data.tagList;
                })
            },
            onSubmit() {
                let self = this;
                // 提交
                this.$axios({
                    method: 'post',
                    url: '/api/cloud-blog-web/blog',
                    data:self.form
                }).then(response => {
                    this.$message.success('提交成功！');
                }).catch(function(err){
                    console.log(err)
                });
            },
            handleClose(tag) {
                this.form.tags.splice(this.form.tags.indexOf(tag), 1);
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.form.tags.push({tagText:inputValue});
                }
                this.inputVisible = false;
                this.inputValue = '';
            }
        }
    }
</script>
